<route>
    {
        meta: {
            layout: 'index',
            title:'项目编辑',
            keepAlive:false
        }
    }  
  </route>
<template>
    <div class="app-container">
        <el-form :rules="rules" ref="formRef" :model="form" style="margin-top: 10px">

            <el-row>
                <el-col :span="6">
                    <el-form-item label="封面图" label-width="120px" prop="cover">
                        <el-upload accept=".png,.jpg" style="width: 80px; height: 80px" class="avatar-uploader"
                            :action="'/dev-api/ufs/upload'" :show-file-list="false" with-credentials
                            :on-success="afterCoverUpload">
                            <img v-if="form.cover" :src="form.cover" class="imgAvatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>

                </el-col>
                <el-col :span="1" :offset="1">
                    <el-button type="primary" plain :icon="Plus" @click="saveForm">保存</el-button>
                </el-col>

                <el-col :span="1" :offset="1">
                    <el-button type="warning" plain :icon="Close" @click="handleClose">关闭</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
                <el-col :span="24">
                    <el-form-item label="项目名称" label-width="120px" prop="title">
                        <el-input v-model="form.title" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="项目简介" label-width="120px" prop="summary">
                        <el-input auto-complete="off" v-model="form.summary" type="textarea"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="18">
                    <el-form-item label="分类" label-width="120px" prop="category" required>
                        <el-tag type="success" v-show="form.category" size="large" style="margin: 0 1rem 0 0"
                            :closable="true" @close="reomveCategory()">
                            {{ form.category }}
                        </el-tag>
                        <!-- 分类选项 -->
                        <el-popover placement="bottom-start" width="460" trigger="click" v-if="!form.category">
                            <template #reference>
                                <el-button type="success" :icon="Plus">分类选择</el-button>
                            </template>
                            <!-- 分类 -->
                            <div class="popover-container">
                                <el-tag v-for="(item, index) of cates" class="mx-1 category-item" size="large" :key="index"
                                    style="margin-left: 3px; margin-top: 2px" @click="setCategory(item)">
                                    {{ item.name }}
                                </el-tag>
                            </div>
                        </el-popover>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="10">
                    <el-form-item label-width="120px" label="文章状态">
                        <el-radio-group v-model="form.status">
                            <el-radio v-for="dict in articles_status" :key="dict.value" :label="dict.value" border>{{
                                dict.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col> -->

            </el-row>

            <el-row>
                <el-form-item label-width="120px" label="项目文档" prop="content">
                    <div id="vditor" style="width: auto;" />
                    <!-- <mavon-editor placeholder="输入文章内容..." style="height: 500px" ref="md" v-model="form.contentMd"
                            @imgAdd="editorImgAdd" /> -->
                </el-form-item>

            </el-row>
            <el-row>
                <el-form-item label-width="120px" label="项目附件" prop="fileIdList">
                    <a-upload v-model:file-list="fileList" action="/dev-api/ufs/upload" list-type="picture"
                        @change="uploadHook">
                        <a-button>
                            <upload-outlined></upload-outlined>
                            附件上传
                        </a-button>
                    </a-upload>
                </el-form-item>

            </el-row>
        </el-form>
    </div>
</template>
<script setup>
import Vditor from 'vditor'
import 'vditor/dist/index.css'
import useAppStore from '@/store/modules/app'
const appStore = useAppStore();
const route = useRoute();
import { UploadOutlined } from '@ant-design/icons-vue'
import { Close, Edit, Plus, UploadFilled, User, CircleCheck, Key } from '@element-plus/icons-vue'
import { queryList as queryCateList } from "@/module/cms/api/category";
import { createOne, queryOne, updateOne } from "@/module/cms/api/article";
import { queryRsr } from '@/custom/pms/api/project';
import useApp from '@/hooks'
import { onActivated } from 'vue';
const { $, proxy } = useApp();
const fileList = ref([])
const formRef = ref(null)
const data = reactive({
    form: {
        id: undefined,
        title: undefined,
        category: undefined,
        editor: "vditor",
        cover: undefined,
        summary: undefined,
        status: 1,
        content: undefined
    },
    rules: {
        title: [{ required: true, message: "文章标题不能为空", trigger: "blur" }],
        content: [{ required: true, message: "文章内容不能为空", trigger: "blur" }],
    },
});
// 上传监听
function uploadHook(e) {

    if (e.file.status == 'done' || e.file.status == 'removed') {
        form.value.fileIdList = e.fileList.map(ele => {
            return ele.response?.data.id;
        })
        console.log(form.value.fileIdList)
        fileList.value = fileList.value.map(ele => {
            ele.thumbUrl = '/files/' + $.extName(ele.name) + '.svg'
            return ele;
        })
    }
}
const { form, rules } = toRefs(data);
const visible = ref(true);
const vditor = ref(null)
onActivated(() => {
    queryOne(route.params.id).then(res => {
        console.log(res)
        form.value = res
        vditor.value = new Vditor('vditor', {

            toolbar: [
                'emoji',
                'headings',
                'bold',
                'italic',
                'strike',
                'line',
                '|',
                'quote',
                'list',
                'ordered-list',
                'check',
                'table',
                '|',
                'code',
                'inline-code',
                'code-theme',
                '|',
                'link',
                'upload',
                '|',
                'preview',
                'outline',
                'fullscreen',
                'edit-mode',
                '|',
                'export',
                'devtools', 'help'

            ],
            lang: 'zh_CN',
            // 初始化的内容
            value: form.value.content,
            upload: {
                url: '/proxy-api/cms/upload',
                fieldName: 'file', // 上传图片的字段名
                max: 30 * 1024 * 1024, // 上传图片的最大大小，单位为字节
                error: function (msg) { // 上传图片失败的回调函数
                    $.showToast({
                        title: '上传失败',
                        icon: 'error'
                    })
                },
                success: function (r, msg) { // 上传图片成功的回调函数

                    // vditor.value.insertValue("hello");
                    console.log(msg)
                    let t = JSON.parse(msg);
                    console.log(t.data)
                    if (t.code === 200) {
                        vditor.value.insertValue(t.data);
                    }
                }
            },
            cache: {
                enable: false
            },
            after: () => {
                // vditor.value is a instance of Vditor now and thus can be safely used here

            }
        });
    })

})
// 保存
function saveForm() {
    proxy.$modal.loading("文章上传中~");
    form.value.content = vditor.value.getValue()
    updateOne(form.value).then((res) => {
        console.log(res);
        proxy.$modal.alertSuccess("文章上传成功");
        proxy.$modal.closeLoading();

        handleClose();
    }).catch(e => {
        proxy.$modal.closeLoading();
    })
}
// 返回
function handleClose() {
    proxy.resetForm("formRef");
    form.value.content = undefined
    // const obj = { path: "/cms/article" };
    // proxy.$tab.closeOpenPage(obj);
    $.navigateBack().then(res => {
        appStore.closeTab()
    })

}
// 分类列表
const cates = ref([]);
// 设置分类
function setCategory(data) {
    form.value.category = data.name;
}
// 移除分类
function reomveCategory() {
    form.value.category = undefined;
}
// 获取分类列表
function getCates() {
    const queryParams = {
        pageSize: 999,
        pageNum: 1,
    };
    queryCateList(queryParams).then((res) => {
        cates.value = res.content;
    });
}
function afterCoverUpload(res) {
    console.log(res)
    let cover = '/dev-api/ufs/preview/' + res.data.id
    form.value.cover = cover
}
function getRsr(){
    queryRsr(route.params.id).then(res=>{
        fileList.value = res.map(ele=>{
            ele.name = ele.fileName;
            ele.thumbUrl = '/files/' + ele.extName + '.svg'
            return ele;
        })
    })
}
getRsr();
getCates();

// 新建文章
</script>
  
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 200px;
    height: 110px;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-img-icon {
    font-size: 28px;
    color: #8c939d;
    line-height: 110px;
    text-align: center;
}

.imgAvatar {
    width: 200px;
    height: 110px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    margin: 0, 0, 0, 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

#imgIcon {
    color: #fff;
    font-size: 1.5rem;
    position: absolute;
    right: 1rem;
    bottom: 1.4rem;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 195px;
    height: 105px;
    line-height: 105px;
    text-align: center;
}

.imgBody {
    width: 195px;
    height: 105px;
    border: solid 2px #ffffff;
    float: left;
    position: relative;
}

.uploadImgBody {
    margin-left: 5px;
    width: 195px;
    height: 105px;
    border: dashed 1px #c0c0c0;
    float: left;
    position: relative;
}

.uploadImgBody :hover {
    border: dashed 1px #00ccff;
}

.inputClass {
    position: absolute;
}

.article-cover {
    position: relative;
    width: 100%;
    height: 90px;
    border-radius: 4px;
}

.article-cover::after {
    content: "";
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
</style>
  